<template>
  <div id="myDynamic">
    <section v-for="(value, key) in this.records" :key="'records' + key">
      <dynamicTemp :dynamicData="value" func='myDouban/myDynamic' ref="dynamicTemp"></dynamicTemp>
    </section>
    <navBtn :btnData="btnData" @update="update" @request="request"></navBtn>
  </div>
</template>

<script>
import { Request } from "../until/request";
import { PagesBtns } from "../until/PagesBtns";
import navBtn from "./NavBtn";
import dynamicTemp from "./dynamicTemp";
export default {
  name: "myDynamic",

  data() {
    return {
      btnData: {
        //currentArr，currentPage:点击页码、上下页按钮时更新
        //all:更新页码后 发送请求后更新
        //totalPage,length:初次请求时赋值 一般不更新（新建动态时)

        //所有按钮按组分开
        all: [],
        //标志当前的按钮组
        currentArr: 0,
        //当前页码
        currentPage: 1,
        //总页码数
        totalPage: 0,
        //all中一共有几组按钮
        length: 0
      },
      //一页有4按钮
      size: 4,
      //当前页的动态内容
      records: {},
      //动态总数
      total: "",
      //当前用户
      userid: 0
    };
  },
  components: {
    navBtn,
    dynamicTemp
  },
  watch: {},
  mounted() {
    //记录当前用户
    this.userid = sessionStorage.getItem("userId");
    //定义当前页码
    //初始时默认是1
    let _currentPage =
      sessionStorage.getItem("_currentPage") == null
        ? 1
        : sessionStorage.getItem("_currentPage");

    //定义当前第几组按钮
    ////初始时默认是0
    let _currentArr =
      sessionStorage.getItem("_currentArr") == null
        ? 0
        : sessionStorage.getItem("_currentArr");

    //btnData:传给navBtn组件
    this.btnData.currentPage = _currentPage;
    this.btnData.currentArr = _currentArr;
    this.request(_currentPage);
  },
  methods: {
    //navBtn子组件切换页码时调用 传递的参数为当前页码的records
    update(data) {
      //对应页码数据填进records 重新渲染页面
      this.records = data;
      setTimeout(() => {
        //调用dynamicTemp组件的update方法 更新内容信息
        this.$refs.dynamicTemp.forEach((item, index) => {
          //data[index]：对应模板的动态数据
          item.update(data[index]);
        });
      }, 0);

      console.log(this.records);
    },
    request(currentPage) {
      console.log(currentPage);
      //查询当前页动态
      //初始时默认是1
      let req = new Request();
      //请求参数
      let params = {
        current: currentPage,
        size: 4
      };
      //请求
      req
        .send(
          "get",
          `api/api/dynamicState/select/${this.userid}/${params.current}/${params.size}`
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            //获取data
            let data = res.data.data;
            //存放当前页码数据 方便页面刷新或由详情页返回时读取当前页数据
            sessionStorage.setItem("_currentPage", data.current);
            sessionStorage.setItem(
              "_currentArr",
              Math.ceil(data.current / 3) - 1
            );

            //当前页的动态内容 传入dynamicTemp组件
            this.update(data.records);
            // this.records = data.records;

            //将数据传入navBtn组件

            //动态总数
            this.total = data.total;
            //页码按钮类实例
            //该实例暴露all和length 赋值给this.btnData
            let PagesBtn = new PagesBtns(this.size, 3, this.total);
            //填充this.btnData 用于渲染index组件
            //all:所有的按钮分组存进数组
            this.btnData.all = PagesBtn.all;
            //total Page:总页码数
            this.btnData.totalPage = PagesBtn.length;
            //length:all中一共有几组按钮
            this.btnData.length = PagesBtn.arrLength;
            console.log(this.btnData);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style  scoped>
#index {
  width: 70rem;
}
</style>